<template>
  <div class="wrapper" :class="{ shadow: props.shadow }">
    <div class="header" v-if="slots.header">
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot></slot>
    </div>
    <div class="footer" v-if="slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, useSlots } from "vue";
const slots = useSlots();

// console.log(slots);

const props = defineProps({
  shadow: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.wrapper {
  background: var(--Color_Bg_White);
  border-radius: 0.5625rem;
  margin-bottom: 1.25rem;
  padding: 0.625rem 1.25rem;
  transition: var(--transition-duration);
}

.header {
  padding: 0.625rem 0 0 0;
}

.body {
  padding: 0.625rem 0;
}

.footer {
  padding: 0.625rem 0;
}

.shadow {
  /* --box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12) */
  box-shadow: var(--box-shadow-light);
}
</style>
